<template>
  <basic>
    <!-- 产品中心 -->
    <div class="produc_center">
      <div class="part_title">产品中心</div>
      <div class="part_decoration">
        <img src="@assets/img/xhx_01.jpg" alt="" />
      </div>
      <div class="produc_center_continer main-container">
        <div class="produc_center_item main-container">
          <div class="pc_parent">
            <div class="pc_div1">
              <img src="@assets/img/96_ba8i.png" alt="" />
              <div>职业夹克装</div>
            </div>
            <div class="pc_div2">
              <img src="@assets/img/86_mcj8.png" alt="" />
              <div>鳄鱼纹宠物项圈</div>
            </div>
            <div class="pc_div3">
              <img src="@assets/img/88_qo13.png" alt="" />
              <div>金属镶钻宠物项圈</div>
            </div>
            <div class="pc_div4">
              <img src="@assets/img/87_kefk.png" alt="" />
              <div>泡棉拉宠物胸背带</div>
            </div>
            <div class="pc_div5">
              <img src="@assets/img/89_9k3a.png" alt="" />
              <div>玫红色狗狗项圈</div>
            </div>
            <div class="pc_div6">
              <img src="@assets/img/90_fsq6.png" alt="" />
              <div>金属镶钻宠物项圈</div>
            </div>
            <div class="pc_div7">
              <img src="@assets/img/91_bfvn.png" alt="" />
              <div>涤纶反光牵引胸背带</div>
            </div>
            <div class="pc_div8">
              <img src="@assets/img/92_72g1.png" alt="" />
              <div>皮质牵引套装</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </basic>
</template>

<script>
  import basic from "@components/Basic/Basic.vue";
  export default {
    name: "Product",
    components: {
      basic,
    },
  };
</script>

<style>
  /* 产品中心 */
  .produc_center {
    height: 900px;
    padding: 30px;
    overflow: hidden;
    /* border: 1px solid red; */
    /* width: 284px; */
    /* height: 272px; */
  }
  .produc_center_continer {
    position: relative;
    overflow: hidden;
    /* border: 1px solid red; */
  }
  .produc_center_item {
    padding-top: 56px;
    /* margin: 0 auto; */
  }
  .part_title {
    text-align: center;
    font-size: 36px;
    margin-top: 40px;
    padding-bottom: 8px;
  }
  .part_decoration {
    position: absolute;
    width: 100%;
  }
  .part_decoration > img {
    display: block;
    margin: 0 auto;
    height: 15px;
  }
  .pc_parent {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 284px);
    grid-template-rows: repeat(2, 272px);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
  .pc_parent > div:hover {
    border: 1px solid #f6ab4a;
  }
  .pc_parent div div {
    text-align: center;
  }
  .pc_parent img {
    width: 230px;
    height: 220px;
    display: block;
    margin: 0 auto;
  }
  .pc_div1 {
    grid-area: 1 / 1 / 2 / 2;
  }
  .pc_div2 {
    grid-area: 2 / 1 / 3 / 2;
  }
  .pc_div3 {
    grid-area: 1 / 2 / 2 / 3;
  }
  .pc_div4 {
    grid-area: 2 / 2 / 3 / 3;
  }
  .pc_div5 {
    grid-area: 1 / 3 / 2 / 4;
  }
  .pc_div6 {
    grid-area: 2 / 3 / 3 / 4;
  }
  .pc_div7 {
    grid-area: 1 / 4 / 2 / 5;
  }
  .pc_div8 {
    grid-area: 2 / 4 / 3 / 5;
  }
</style>
